<template>
  <view class="container">
    <view class="bg-white padding-sm fixed">
      <view class="flex justify-start align-center">
        <view
          class="flex justify-start align-center bg-F4F4F4 padding-left round f-grow1"
          style="height: 70rpx; width: 460rpx"
        >
          <image
            :src="baseUrl + '/static/search_for.png'"
            mode=""
            style="width: 25rpx; height: 25rpx"
          >
          </image>
          <input
            v-model="name"
            type="text"
            @input="handSearch"
            value=""
            class="text-13 f-grow1 padding-left-sm"
            placeholder="商品名称"
          />
        </view>
      </view>
      <scroll-view
        scroll-x
        class="bg-white nav text-666"
        scroll-with-animation
        :scroll-left="scrollLeft"
      >
        <view
          class="cu-item"
          :class="TabCur == 0 ? 'color cur text-bold' : ''"
          @tap="tabSelect"
          :data-id="0"
        >
          全部
        </view>
        <view
          class="cu-item"
          :class="index + 1 == TabCur ? 'color cur text-bold' : ''"
          v-for="(item, index) in typeList"
          :key="index"
          @tap="tabSelect"
          :data-id="index + 1"
          :data-first="item.id"
        >
          {{ item.name }}
        </view>
      </scroll-view>
    </view>
    <view style="margin-bottom: 140rpx; margin-top: 220rpx">
      <view
        class="margin-sm bg-white radius10 padding-bottom"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="flex justify-start padding-sm position-relative">
          <view
            v-if="item.recommandStatus"
            class="text-11 zIndex flex justify-center align-center text-white"
            :style="
              'background-image: url(' +
              baseUrl +
              '/static/shop_bg2.png);background-size: 100% 100%;width: 70rpx;height: 36rpx;position: absolute;left: 20rpx;top: 20rpx'
            "
          >
            热卖
          </view>
          <!-- <view class="text-13 text-white flex justify-center align-center" style="position: absolute;bottom: 20rpx;left: 20rpx;width: 200rpx;height: 46rpx;background: rgba(0,0,0,.5);z-index: 1;">
						已结束
					</view> -->
          <image
            :src="item.pic"
            mode=""
            class="radius5"
            style="width: 200rpx; min-width: 200rpx; height: 200rpx"
          ></image>
          <view
            class="margin-left-sm flex justify-between flex-direction"
            style="width: calc(100% - 100rpx)"
          >
            <view class="text-15 text-333 text-cut-2" style="width: 80%">
              {{ item.shopName }}
            </view>
            <view class="text-15 text-333 text-cut-2" style="width: 80%">
              {{ item.name }}
            </view>
            <view class="flex justify-between align-center">
              <view class="flex justify-start align-center">
                <view class="text-17 color text-bold">
                  ¥ {{ parseFloat(item.price / 100).toFixed(2) }}
                </view>
                <view class="text-sm text-999 text-delete margin-left-xs">
                  ¥ {{ parseFloat(item.originalPrice / 100).toFixed(2) }}
                </view>
              </view>
              <view class="color text-sm"> 库存 {{ item.stock }} </view>
            </view>
          </view>
        </view>
        <view class="flex justify-end align-center padding-right-sm">
          <view class="flex justify-center align-center">
            <image
              :src="baseUrl + '/static/less-good.png'"
              @click="increase(item)"
              mode=""
              class="cu-avatar round sm"
            ></image>
            <view class="text-sm margin-left margin-right">
              {{ item.num }}
            </view>
            <image
              :src="baseUrl + '/static/add-good.png'"
              @click="add(item)"
              mode=""
              class="cu-avatar round sm"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <view class="footer text-white flex justify-between align-center">
      <image
        @click="modalName = 'bottomModal'"
        :src="baseUrl + '/static/cart4.png'"
        mode=""
        class="position-relative"
      >
        <view class="cu-tag badge">
          {{ productNum }}
        </view>
      </image>
      <view
        class="bg-1C1C1C flex-treble height-sub flex justify-start align-center"
        style="
          padding-left: 168rpx;
          border-bottom-left-radius: 98rpx;
          border-top-left-radius: 98rpx;
        "
      >
        <text class="text-sm">¥</text>
        <text class="text-17 text-bold">{{
          parseFloat(countPrice / 100).toFixed(2)
        }}</text>
      </view>
      <view
        @click="
          toPage(
            '/pagesA/pages/purchase/purchase?cartIds=' +
              JSON.stringify(cartIds) +
              '&shopId=' +
              shopId +
              '&type=1'
          )
        "
        class="text-15 bg-color flex-sub height-sub flex justify-center align-center"
        style="
          border-bottom-right-radius: 98rpx;
          border-top-right-radius: 98rpx;
        "
      >
        去支付
      </view>
    </view>
    <view
      class="cu-modal bottom-modal"
      @click="modalName = ''"
      :class="modalName == 'bottomModal' ? 'show' : ''"
    >
      <view class="cu-dialog bg-tr" @click.stop="childClick">
        <view
          class="padding flex justify-between align-center bg-FFEDDC radius-t-l radius-t-r"
        >
          <view
            class="text-333 text-sm padding-left-xs text-bold"
            style="border-left: 6rpx solid #ed7200"
          >
            已选商品
          </view>
          <view class="text-999 text-sm flex justify-center align-center">
            <view class="cuIcon-delete"> </view>
            <view class="margin-left-xs" @click="clear"> 清空购物车 </view>
          </view>
        </view>
        <view class="bg-white padding-bottom-sm">
          <view class="padding" v-if="selectProduct.length == 0">暂无数据</view>
          <block v-else>
            <view
              class="padding solid-bottom flex justify-between align-center"
              v-for="(item, index) in selectProduct"
            >
              <view class="text-333 text-15 text-cut">
                {{ item.name }}
              </view>
              <view class="flex justify-center align-center">
                <view class="text-15 color">
                  ¥{{ parseFloat(item.price / 100).toFixed(2) }}
                </view>
                <view class="flex justify-center align-center margin-left">
                  <image
                    :src="baseUrl + '/static/less-good.png'"
                    mode=""
                    class="cu-avatar round sm"
                    @click="increase(item)"
                  >
                  </image>
                  <view class="text-sm margin-left margin-right">
                    {{ item.num }}
                  </view>
                  <image
                    :src="baseUrl + '/static/add-good.png'"
                    mode=""
                    class="cu-avatar round sm"
                    @click="add(item)"
                  >
                  </image>
                </view>
              </view>
            </view>
          </block>

          <view
            class="fooder text-white flex justify-between align-center position-relative"
          >
            <image
              :src="baseUrl + '/static/cart4.png'"
              mode=""
              class="position-relative"
            >
              <view class="cu-tag badge">
                {{ productNum }}
              </view>
            </image>
            <view
              class="bg-1C1C1C flex-treble height-sub flex justify-start align-center"
              style="
                padding-left: 168rpx;
                border-bottom-left-radius: 98rpx;
                border-top-left-radius: 98rpx;
              "
            >
              <text class="text-sm">¥</text>
              <text class="text-17 text-bold">{{
                parseFloat(countPrice / 100).toFixed(2)
              }}</text>
            </view>
            <view
              @click="
                toPage(
                  '/pagesA/pages/purchase/purchase?cartIds=' +
                    JSON.stringify(cartIds) +
                    '&shopId=' +
                    shopId +
                    '&type=1'
                )
              "
              class="text-15 bg-color flex-sub height-sub flex justify-center align-center"
              style="
                border-bottom-right-radius: 98rpx;
                border-top-right-radius: 98rpx;
              "
            >
              去支付
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="loading" />
  </view>
</template>

<script>
import BetterPull from "@/common/util/Nbetter.js";
export default {
  mixins: [
    BetterPull({
      async getPage(page, done) {
        this.loading = "loading";
        const param = {
          pageNum: page,
          pageSize: 10,
          productType: 2,
        };
        if (this.firstCategoryId) {
          param["firstCategoryId"] = this.firstCategoryId;
        }
        if (this.name) {
          param["keywords"] = this.name;
        }

        const [err, res] = await this.$get(this.$api.purchaseList, param);
        if (res) {
          var data = res.data.list;
          if (data.length != 0) {
            for (let i in data) {
              this.$set(data[i], "num", 0);
            }
          }
          done(data);
          if (data.length < 10) {
            this.loading = "noMore";
          } else {
            this.loading = "more";
          }
        }
        if (err) {
          done([]);
          this.loading = "noMore";
        }
      },
	 list:'list',
	 page:'page',
	 status:2
	  
    }),
  ],
  onLoad() {
    this.getProducType();
  },
  onShow() {
  	console.log(111111)
  },
  data() {
    return {
      TabCur: 0,
      scrollLeft: 0,
      baseUrl: this.$config.baseUrl,
      modalName: "",
      loading: "more",
      typeList: [],
      firstCategoryId: "",
      name: "",
      selectProduct: [],
      productNum: 0,
      countPrice: 0,
      selectEdIndex: "",
      cartIds: [],
      shopId: 0,
    };
  },
  methods: {
    toPage(url) {
      if (this.countPrice == 0) {
        return this.$util.msg("请选择采购商品");
      }
      console.log(this.selectProduct);
      const array = [];
      for (let i in this.selectProduct) {
        array.push({
          num: this.selectProduct[i].num,
          id: this.selectProduct[i].id,
          price: this.selectProduct[i].price,
          shopId: this.selectProduct[i].shopId,
          shopType: this.selectProduct[i].shopType,
          pic: this.selectProduct[i].pic,
          name: this.selectProduct[i].name,
        });
      }
      this.$util.openNewPage(
        url +
          "&selectProduct=" +
          JSON.stringify(array) +
          "&countPrice=" +
          this.countPrice +
          "&productNum=" +
          this.productNum
      );
    },
    tabSelect(e) {
      console.log(e);
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      if (e.currentTarget.dataset.first) {
        this.firstCategoryId = e.currentTarget.dataset.first;
      } else {
        this.firstCategoryId = "";
      }
      this.list = [];
      this.selectProduct = [];
      this.productNum = 0;
      this.countPrice = 0;
      this.Refresh();
    },
    handSearch() {
      this.list = [];
      this.Refresh();
    },
    childClick() {},
    add(item) {
      console.log(this.selectEdIndex);
      // 不同店铺商品添加
      // if (this.selectEdIndex && this.selectEdIndex != item.shopId) {
      // 	return this.$util.msg('请选择同一个店铺下的商品')
      // }
      item.num++;
      this.selectEdIndex = item.shopId;
      const array = [];
      let num = 0;
      let price = 0;
      this.shopId = item.shopId;
      this.cartIds = [];
      for (let i in this.list) {
        if (this.list[i].num != 0) {
          array.push(this.list[i]);
          num += this.list[i].num;
          price += this.list[i].num * this.list[i].price;
          this.cartIds.push(this.list[i].id);
        }
      }
      this.selectProduct = array;
      this.productNum = num;
      this.countPrice = price;
      console.log(item);
      console.log(this.cartIds);
    },
    increase(item) {
      console.log(this.selectEdIndex);
      //如果需要多商家一起支付 把这注释掉
      // if (this.selectEdIndex && this.selectEdIndex != item.shopId) {
      // 	return this.$util.msg('请选择同一个店铺下的商品')
      // }
      if (item.num == 0) {
        return;
      }
      item.num--;
      let num = 0;
      let price = 0;
      const array = [];
      this.cartIds = [];
      for (let i in this.list) {
        if (this.list[i].num != 0) {
          array.push(this.list[i]);
          num += this.list[i].num;
          price += this.list[i].num * this.list[i].price;
          this.cartIds.push(this.list[i].id);
        }
      }
      this.selectProduct = array;
      this.productNum = num;
      this.countPrice = price;

      console.log(item);
      console.log(this.cartIds);
    },
    //清空购物车
    clear() {
      const that = this;
      uni.showModal({
        title: "提示",
        content: "你确定清空购物车吗",
        success: function (res) {
          if (res.confirm) {
            that.selectProduct = [];
            for (let i in that.list) {
              that.list[i].num = 0;
            }
            that.productNum = 0;
            that.countPrice = 0;
            console.log("用户点击确定");
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    submit() {
      if (this.countPrice == 0) {
        this.$util.msg("请选择采购商品");
      } else {
        this.visible = true;
      }
    },
    async getProducType() {
      const data = {
        type: 1,
      };
      const [err, rs] = await this.$get(this.$api.home_categoryTreeList, data);
      if (rs) {
        this.typeList = rs.data;
      }
    },
    onConfirm(res, vale) {
      console.log(res);
      this.visible = false;
    },
    onCancel() {
      this.visible = false;
    },
  },
  
 
  // 不同店铺商品添加
  watch: {
    productNum(newVal, oldVal) {
      console.log(oldVal, newVal);
      if (newVal == 0) {
        this.selectEdIndex = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.fixed {
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100vw;
}
.tabs {
  padding: 4rpx;

  .tab {
    width: 234rpx;
    padding: 16rpx;
  }

  .on {
    background: #fff;
    color: #ed7200;
    font-weight: bold;
  }
}

.btn {
  min-width: 148rpx;
  width: 148rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  border: 1rpx solid;
  // background: linear-gradient(to right,#FF416C,#FF4B2B);
}

.c-nav {
  view {
    border-bottom: 6rpx solid #fff;
  }

  .on {
    color: #221815;
    font-weight: bold;
    border-bottom: 6rpx solid #ed7200;
  }
}

.footer {
  position: fixed;
  left: 20rpx;
  right: 20rpx;
  bottom: 80rpx;
  height: 98rpx;

  image {
    width: 116rpx;
    height: 122rpx;
    position: absolute;
    bottom: 0;
    left: 34rpx;
    bottom: 0;
  }

  .cu-tag.badge {
    left: 110rpx;
    right: auto;
  }
}

.cu-dialog {
  .fooder {
    // position: relative;
    margin: 30rpx 20rpx 0;
    height: 98rpx;

    image {
      width: 116rpx;
      height: 122rpx;
      position: absolute;
      bottom: 0;
      left: 34rpx;
      bottom: 0;
    }

    .cu-tag.badge {
      left: 110rpx;
      right: auto;
    }
  }
}
</style>
